<template>
    <div>
        <!-- {{ route.fullPath }}//全路由，包括后面的参数 -->
        <!-- {{ route.path }}//纯路径 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/home' }">home</el-breadcrumb-item>
            <template v-for="item in routeList" :key="item">
                <el-breadcrumb-item v-if="!item?.meta?.hidden && item?.meta?.title">{{
                    item?.meta?.title
                }}</el-breadcrumb-item>
            </template>


        </el-breadcrumb>
    </div>
</template>

<script  setup>
import { watch, reactive, computed } from 'vue';
import { useRoute } from 'vue-router'
import { ArrowRight } from '@element-plus/icons-vue'
const route = useRoute()

const routeList = computed(() => route.path==="/home"?[]: route.matched)
watch(() => route.matched,
    () => {
        // console.log(route.matched, 'route')
    })
</script>

<style lang="scss" scoped>

</style>